<template>
  <div class="common-detail-wrap">
    <div class="data-info-container">
      <el-descriptions
        v-if="detailInfo?.position && detailInfo.position === 4000"
        style="background-color: #161627"
        size="small"
        :column="1"
      >
        <el-descriptions-item label="手抛球分">{{
          detailInfo.handballScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="任意球分">{{
          detailInfo.freeKickScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="远射分">{{
          detailInfo.dribbleScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="近距离分">{{
          detailInfo.closeRangeScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="点球分">{{
          detailInfo.penaltyScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="反应分">{{
          detailInfo.reactiveScore || "-"
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-else
        style="background-color: #161627"
        size="small"
        :column="1"
      >
        <el-descriptions-item label="进攻分">{{
          detailInfo.attackScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="对抗分">{{
          detailInfo.resistScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="速度分">{{
          detailInfo.speedScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="盘带分">{{
          detailInfo.dribblingScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="力量分">{{
          detailInfo.powerScore || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="防守分">{{
          detailInfo.defendScore || "-"
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="data-charts-container">
      <div class="charts-box">
        <Echarts id="player-data-charts" :option="chartsOptions"></Echarts>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "@/components/Echarts/index.vue";
export default {
  name: "common-detail-comp",
  components: { Echarts },
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    chartsOptions({ detailInfo }) {
      let indicator = [];
      let seriesValue = [];
      if (detailInfo?.position === 4000) {
        seriesValue = [
          detailInfo?.handballScore,
          detailInfo?.freeKickScore,
          detailInfo?.dribbleScore,
          detailInfo?.closeRangeScore,
          detailInfo?.penaltyScore,
          detailInfo?.reactiveScore,
        ];
        indicator = [
          {
            text: "手抛球",
            max: 100,
            val: detailInfo?.handballScore || 0,
            // position: "center",
          },
          {
            text: "任意球",
            max: 100,
            val: detailInfo?.freeKickScore || 0,
            // position: "center",
          },
          {
            text: "远射",
            max: 100,
            val: detailInfo?.dribbleScore || 0,
            // position: "center",
          },
          {
            text: "近距离",
            max: 100,
            val: detailInfo?.closeRangeScore || 0,
            // position: "center",
          },
          {
            text: "点球",
            max: 100,
            val: detailInfo?.penaltyScore || 0,
            // position: "center",
          },
          {
            text: "反应",
            max: 100,
            val: detailInfo?.reactiveScore || 0,
            // position: "center",
          },
        ];
      } else {
        seriesValue = [
          detailInfo?.attackScore,
          detailInfo?.resistScore,
          detailInfo?.speedScore,
          detailInfo?.dribblingScore,
          detailInfo?.powerScore,
          detailInfo?.defendScore,
        ];
        indicator = [
          {
            text: "进攻",
            max: 100,
            val: detailInfo?.attackScore || 0,
            // position: "center",
          },
          {
            text: "对抗",
            max: 100,
            val: detailInfo?.resistScore || 0,
            // position: "center",
          },
          {
            text: "速度",
            max: 100,
            val: detailInfo?.speedScore || 0,
            // position: "center",
          },
          {
            text: "盘带",
            max: 100,
            val: detailInfo?.dribblingScore || 0,
            // position: "center",
          },
          {
            text: "力量",
            max: 100,
            val: detailInfo?.powerScore || 0,
            // position: "center",
          },
          {
            text: "防守",
            max: 100,
            val: detailInfo?.defendScore || 0,
            // position: "center",
          },
        ];
      }
      const options = {
        //你的代码
        backgroundColor: "#161627",
        tooltip: {
          trigger: "item",
        },
        radar: [
          {
            indicator: indicator,
            splitNumber: 7,
            center: ["50%", "50%"],
            name: {
              textStyle: {
                color: "#ffffff",
              },
            },
            splitArea: {
              areaStyle: {
                color: ["#16172D", "#36365C"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#5A5A89",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#5A5A89",
              },
            },
          },
        ],
        series: [
          {
            type: "radar",
            lineStyle: {
              normal: {
                color: "#99EFFA",
                width: 2,
              },
            },
            lable: {
              show: true,
            },
            itemStyle: {
              color: "#99EFFA", //顶点的颜色
            },
            data: [
              {
                value: seriesValue,
                name: `球员${detailInfo.name || ""}六维`,
                symbolSize: 3,
                symbol: "circle",
                areaStyle: {
                  color: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent",
                      },
                      {
                        offset: 0.5,
                        color: "transparent",
                      },
                      {
                        offset: 1,
                        color: "rgba(59,101,251,.9)",
                      },
                    ],
                    globalCoord: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#000000", //拐点颜色
                    borderColor: "#99EFFA", //拐点边框颜色
                    borderWidth: 1, //拐点边框大小
                  },
                  emphasis: {
                    color: "#000000", //hover拐点颜色定义
                  },
                },
              },
            ],
          },
        ],
      };
      return options;
    },
  },
};
</script>

<style scoped>
.common-detail-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.data-info-container {
  width: 300px;
  padding-left: 10px;
  padding-top: 20px;
}
.data-charts-container {
  flex: 1;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}
.charts-box {
  width: 280px;
  height: 260px;
}
</style>
<style>
.data-info-container .el-descriptions__body {
  background-color: #161627 !important;
  color: #ffffff !important;
}
</style>
